/* @removeInDist
  This file is automatically imported into everything .pcss files.  
  I recommend declaring all common sass-like variables and mixins here.
*/

@custom-media --is-large-layout (width > $layoutWidth);
@custom-media --is-layout-width (769px <= width <= $layoutWidth);
@custom-media --is-tablet (426px <= width <= 769px);
@custom-media --is-mobile (width <= 426px);

$layoutWidth: 1920px;
$minLayoutWidth: 320px;
$mainFontSize: 16px;
$minFontSize: 12px;

@define-mixin size $width, $height: $width {
  width: $width;
  height: $height;
}

@define-mixin hide {
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

@define-mixin show {
  pointer-events: all;
  overflow: auto;
  opacity: 1;
}

/* @removeInDist 
 ? Use these mixins to visually highlight properties that depend on the <display> value.
*/
@define-mixin grid {
  display: grid;
  @mixin-content;
}

@define-mixin flex {
  display: flex;
  @mixin-content;
}

@define-mixin inline-flex {
  display: inline-flex;
  @mixin-content;
}
